<template>
  <a-modal v-model="showModal" @ok="confirmOk" @cancel="cancel" :title="titles" width="450px">
    <a-spin :spinning="loading">
      <a-form :form="form">
        <a-row :gutter="[24, 0]">
          <a-col :span="20">
            <a-form-item class="mb-15" label="图片上传" :label-col="labelCol" :wrapper-col="wrapperCol">
              <PreviewImage :showUpload="isShow" class="mt-12" :is-preview="false" :scene="8"
                            :show-upload="formgetFileLength(`remark`) < 1"
                            accept=".png,.jpg"
                            @uploadSuccess="formuploadSuccess($event, `remark`)" v-decorator="[
                                    `remark`,
                                    {
                                        rules: [{ required: false, message: '请上传图片', type: 'array' }],
                                        initialValue: [],
                                    },
                                ]" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[24, 0]">
          <a-col :span="20">
            <a-form-item class="mb-15" label="名称" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-input  placeholder="请输入" v-decorator="['label',
                                {
                                    rules: [{ required: true, message: '请输入', whitespace: true }],
                                },
                            ]" maxLength="30"></a-input>
            </a-form-item>
          </a-col>
        </a-row>


      </a-form>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  get
} from 'lodash'
import {
  createDataType,
  updateDataType
} from '@/api/newPet'
export default {
  data() {
    return {
      loading: false,
      isShow: true,
      isStatus: '上架',
      prohibit:false,
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 16
      },
      details: {},
      showModal: false,
      titles: '新增',
      info: {},
      form: this.$form.createForm(this),

    }
  },
  computed: {

  },
  watch: {

  },
  async created() {

  },
  methods: {
    checkedChange(e) {

      this.isStatus = e ? '上架' : '下架'
    },
    formgetFileLength(type) {//获取图片
      return get(this.form.getFieldValue(type), 'length') || 0
    },
    formuploadSuccess(data, type) {
      this.form.setFieldsValue({
        remark: [data.path],
      })
    },
    changeSelect(e) {
      console.log(e)
    },
    onChange(e) {
      console.log(e.target.value)
    },
    cancel() {

      this.form.resetFields()
      this.showModal = false

    },
    confirmOk() {
      this.form.validateFields((err, values) => {

        if (!err) {
          // this.loading = true
          const {
            info

          } = this
          let data = {
            id: info && info.id ? info.id : undefined,
            ...this.$utils.trimValue(values),
            value:values.label,
            sort:1,
            remark:values.remark.toString(),
            dictType:this.info.dictType,
            status: 1,
          }

          if(this.titles=='新增'){
            createDataType(data).then(res=>{
              this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
              // this.$emit('upload')
              this.cancel()
            }).finally(()=>{
              this.loading = false
            })
          } else{
            updateDataType(data).then(res=>{
              this.$message.success(info && info.id ? '修改成功！' : '新增成功！')
              // this.$emit('upload')
              this.cancel()
            }).finally(()=>{
              this.loading = false
            })
          }

        }
      })
    },
    getData() {
      this.loading = true
      deductionDetail({ id: 1 }).then(data => {
        this.details = data
      }).finally(() => this.loading = false)
    },
    open(data) {
      this.prohibit=false
      this.isStatus='上架'
      this.showModal = true
      this.info = data
      if (data.id) {
        this.isStatus = data.status == 0 ? '上架' : '下架'
        this.$nextTick(() => {
          this.form.setFieldsValue({
            ...data,
            status: data.status == 0 ? true : false,
            remark:[data.remark]
          })
        })
        this.titles = '修改'
        if(data.isPerson=='子'){
          this.prohibit=true
        }
      } else {
        console.log(data, '新增')
        this.titles = '新增'
        this.$nextTick(() => {
          this.form.setFieldsValue({
            status: true

          })
        })
      }

      // images:['https://img2.baidu.com/it/u=1906732828,3160455141&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666']

      // this.$emit('upload')
      // this.$nextTick(() => {
      //     this.form.setFieldsValue({
      // 					...res
      // 				})

      // 			})
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .ant-form-item-label {
  // width: 100px;


}
</style>
